<template>
  <ul>
    <li>{{ res.id }}</li>
    <li>{{ res.title }}</li>
    <li>{{ res.contend }}</li>
  </ul>
  <hr />
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, watch } from "vue";

interface Txt {
  title: string;
  contend: string;
}

export default defineComponent({
  setup(props, context) {
    const page = ref(context.attrs.msg);

    const que = reactive([
      {
        id: "1",
        title: "oo1",
        contend: "hah1",
      },

      {
        id: "2",
        title: "oo2",
        contend: "hah2",
      },

      {
        id: "3",
        title: "oo1",
        contend: "hah3",
      },
    ]);

    let res = reactive({});

    // let result = reactive({
    //   id: "1",
    //   title: "oo1",
    //   contend: "hah1",
    // });

    res = computed(() => {
      return que.find((index) => {
        return index.id == page.value;
      });
    });

    // watch(
    //   page,
    //   () => {
    //     result = que.find((index) => {
    //       return index.id == page.value;
    //     });
    //   },
    //   { immediate: true, deep: true }
    // );

    // console.log(res,"ccc");
    return {
      que,
      res,
      page
      // result,
    };
  },

  updated() {

    console.log(this);
  },
  mounted() {
    // const name = "dxk";
    // setTimeout(() => {
    // //   this.name = name;
    // }, 1000);
    // console.log(this);
    // console.log(this.$router.currentRoute._rawValue.params.id);
  },

  methods: {},
});
</script>

<style scoped>
</style>